import React, { useState, useEffect } from 'react';
import { UploadOutlined } from '@ant-design/icons';
import { Modal, Form, Button, Upload, Input } from 'antd';
import { isEmpty } from 'lodash';
import { RcFile } from 'antd/es/upload/interface';

export interface CreateBlueprintForm {
  id?: string;
  file: string;
  title: string;
}

interface CreateBlueprintProps {
  targetKey: string;
  initData: any;
  modalVisible: boolean;
  onCancel: () => void;
  onSave: (targetKey: string, formValues: CreateBlueprintForm) => void;
}

interface UploadPdfProps {
  value?: RcFile;
  onChange?: (value?: RcFile) => void;
}

const UploadPdf: React.FC<UploadPdfProps> = ({ value, onChange }) => {
  const [fs, setFileList] = useState(value ? [value] : []);

  return (
    <Upload
      action="http://150.158.198.170/tsapi/file/upload"
      name="file"
      accept=".pdf"
      fileList={fs}
      onRemove={() => {
        setFileList([]);
        if (onChange) {
          onChange(undefined);
        }
      }}
      beforeUpload={(file) => {
        setFileList([file]);
        if (onChange) {
          onChange(file);
        }
        return false;
      }}
    >
      <Button disabled={fs.length > 0} size="small" title="上传">
        <UploadOutlined /> 点击上传
      </Button>
    </Upload>
  );
};

const CreateBlueprint: React.FC<CreateBlueprintProps> = (props) => {
  const [form] = Form.useForm();

  const { targetKey, initData, modalVisible, onCancel, onSave } = props;

  useEffect(() => {
    form.setFields([
      {
        name: 'id',
        value: initData && initData.id,
      },
      {
        name: 'title',
        value: initData && initData.title,
      },
    ]);
  }, [initData])

  return (
    <Modal
      destroyOnClose
      afterClose={() => {
        form.resetFields();
      }}
      title="图纸上传"
      visible={modalVisible}
      onCancel={() => onCancel()}
      footer={null}
    >
      <Form
        form={form}
        onFinish={(e) => {
          const { file, title, id } = e;
          onSave(targetKey, { id, file, title });
        }}
      >
        <Form.Item name="id" noStyle>
          <Input hidden />
        </Form.Item>
        <Form.Item
          name="title"
          label="图纸名称"
          noStyle={!!(initData && initData.id)}
          // initialValue={initData && initData.title}
          rules={[
            {
              required: true,
              message: '必填',
            },
            {
              max: 20,
              message: '最长不超过10个字符！',
            },
          ]}
        >
          <Input hidden={!!(initData && initData.id)} maxLength={20} />
        </Form.Item>
        <Form.Item
          name="file"
          label="图纸上传"
          rules={[
            {
              required: true,
              validator: (_, value) => {
                const promise = Promise;
                if (isEmpty(value)) {
                  return promise.reject('请选择文件');
                }
                return promise.resolve();
              },
              message: '请选择文件',
            },
          ]}
        >
          <UploadPdf />
        </Form.Item>

        <Form.Item>
          <Button size="large" type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateBlueprint;
